<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
      <el-menu
          default-active="2"
          router
          class="el-menu-vertical-demo"
      >
        <el-menu-item v-for="item in SideBar"  :key="item.value" :index="item.url">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>{{ item.value }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
      <el-main>
      <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive} from "vue";
import {useAuthStore} from "@/stores/UseAuthStore";
import {
  Menu as IconMenu,
} from '@element-plus/icons-vue'

const authStore = useAuthStore();
const SideBar = reactive([
  {value: "数据采集", url: "/data_factory/data_acquisition", role: 1},
  {value: "可信证明", url: "/data_factory/proof_of_trust", role: 4},
  {value: "数据清洗", url: "/data_factory/data_cleansing", role: 1},
  {value: "格式转换", url: "/data_factory/format_conversion", role: 5},
  {value: "数据融合", url: "/data_factory/data_fusion", role: -1},
  {value: "数据挖掘", url: "/data_factory/data_mining", role: -1},
  {value: "数据分析及大数据处理", url: "/data_factory/data_analysis_processing", role: -1},
  {value: "数据可视化", url: "/data_factory/data_visualization", role: -1},
  {value: "数据基本处理", url: "/data_factory/data_basic_processing", role: -1},
  {value: "数据特征提取", url: "/data_factory/data_feature_extraction", role: -1},
  {value: "机器学习", url: "/data_factory/data_machine_learning", role: -1},
  {value: "结果输出与应用", url: "/data_factory/data_output_results", role: 5},
  {value: "团队管理", url: "/data_factory/team_management", role: 5},
  {value: "任务管理", url: "/data_factory/task_management", role: 5},
])

const sideBarValue = computed(() => {
  return SideBar.filter(s => {
    return s.role === -1 || s.role === authStore.userRole;
  })
})

</script>

<style scoped>
:deep(.el-menu-item) {
  height: 69px;
}

:deep(.el-menu-item) {
  overflow: hidden;
}
</style>